<template>
  <div>
    <!-- 顶部 -->
    <div id="title" style="height: 6.6vh">
      <mt-header title="我的"></mt-header>
    </div>
    <!-- 中间内容 -->
    <div class="mymessage" style="height: 87vh">
      <!-- 第一层 -->
      <div class="no1">
        <div class="touxiang">
          <img src="../assets/icon/my.png" alt="" />
        </div>
        <div class="bianji">
          <h3>MY-NAME</h3>
          <p style="opacity: 0.5">点击查看或编辑个人主页</p>
        </div>
        <div class="jiantou">
          <h3 style="opacity: 0.5">></h3>
        </div>
      </div>
      <!-- 第二层 -->
      <div class="no2">
        <div class="no2s">
          <img src="../assets/icon/peiban.png" alt="" />
          <p>我的孩子</p>
        </div>
        <div class="no2s">
          <img src="../assets/icon/dingdan.png" alt="" />
          <p>我的订单</p>
        </div>
        <div>
          <img src="../assets/icon/jiaqi.png" alt="" />
          <p>请假中心</p>
        </div>
      </div>
      <!-- 第三层 -->
      <div class="no3">
        <div>
          <img src="../assets/icon/phone.png" alt="" />
          <p>亲情号码</p>
          <h4>></h4>
        </div>
        <div>
          <img src="../assets/icon/zixun.png" alt="" />
          <p>咨询投诉</p>
          <h4>></h4>
        </div>
        <div>
          <img src="../assets/icon/anquan.png" alt="" />
          <p>关于我们</p>
          <h4>></h4>
        </div>
        <div style="display: flex">
          <van-cell @click="toToast">
            <img src="../assets/icon/clear.png" alt="" />
            <p>清除缓存</p>
            <h4>></h4>
          </van-cell>
        </div>
        <div>
          <van-cell class="fenxiang" @click="showShare = true">
            <img src="../assets/icon/tuijian.png" alt="" />
            <p>分享推荐</p>
            <h4>></h4>
          </van-cell>
          <van-share-sheet
            v-model:show="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
        </div>
      </div>
      <!-- 第四层 -->
      <div class="no4">
        <h4>退出登录</h4>
      </div>
    </div>
    <!-- 尾部 -->
  </div>
</template>

<script>
// 分享推荐 组件引入
import { ref } from "vue";
import { Toast } from "vant";
export default {
  //清除缓存
  methods: {
    toToast() {
      Toast.success("清除成功");
    },
  },
  setup() {
    // 分享推荐
    const showShare = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];
    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };
    return {
      options,
      showShare,
      onSelect,
    };
  },
};
</script>

<style scoped lang='scss'>
* {
  padding: 0;
  margin: 0;
}
.mymessage {
  background-color: #f4f4f7;
  > div {
    background-color: white;
    border-radius: 15px;
    margin: 0 auto;
    width: 93vw;
    margin-bottom: 2vh;
  }
}
.no1 {
  display: flex;
  height: 18vh;
  .touxiang img {
    padding-top: 3vh;
    margin: 2vh;
    width: 10vh;
    height: 10vh;
  }
  .bianji {
    padding-top: 5vh;
    margin-right: 25vw;
  }
  .jiantou {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 7.5vw;
  }
}
.no2 {
  display: flex;
  height: 14vh;
  text-align: center;
  img {
    width: 5vh;
    height: 5vh;
  }
  > div {
    width: 33vw;
    padding: 3vh;
  }
  p {
    opacity: 0.5;
    font-size: 4vw;
  }
  .no2s {
    border-right: 1px solid gray;
  }
}
.no3 {
  height: 40vh;
  overflow: hidden;
  > div {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(20, 50, 154, 0.2);
  }
  :last-child {
    border-bottom: 1px solid white;
  }
  img {
    margin: 3.5vw 1vw 3vw 3vw;
    height: 4vh;
    width: 7vw;
  }
  p {
    font-size: 4vw;
  }
  h4 {
    margin-left: 55vw;
    font-size: 5vw;
    opacity: 0.4;
  }
  .van-cell {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(20, 50, 154, 0.2);
    div {
      display: flex;
      align-items: center;
    }
  }
  .fenxiang {
    border-bottom: 1px solid white;
  }
}
.no4 {
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
}
</style>